<template>
	<view class="content">
		<!--f1:手机状态栏-->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		<!--f2:Logo图片-->
		<image src="../../static/img/logo.png" class="logo" mode="widthFix"></image>
		<!--f3:手机号码输入框-->
		<view class="input-group">
			<input v-model="phone" class="input" type="tel" placeholder="请输入手机号" />
			<uni-icons class="icon left" type="phone-filled" size="25px" color="#090"></uni-icons>
			<uni-icons class="icon right" type="clear" size="25px" color="#1296DB" @click="clearphone"></uni-icons>
		</view>
		<!-- f4:密码输入框 -->
		<view class="input-group pwd-group">
			<input v-model="pwd" :password="hidePwd" class="input" placeholder="请输入密码" />
			<uni-icons class="icon left" type="locked-filled" size="25px" color="#090" />
			<uni-icons class="icon right" :type="hidePwd ? 'eye-slash-filled' : 'eye-filled'" @click="hidePwd = !hidePwd" size="22px" color="#8a8a8a" />
		</view>
		<!-- F5：提交按钮 -->
		<button class="btn" @click="doLogin">登 录</button>
		<!-- F6：找回密码|| 注册 -->
		<view class="F6">
			<navigator class="find" open-type="navigate" url="/pages/findPwd/findPwd">找回密码</navigator>
			<navigator class="find" open-type="navigate" url="/pages/Register/Register">用户注册</navigator>
		</view>
	</view>
</template>

<script>
import { userLogin } from '../../service/index.js';
export default {
	data() {
		return {
			statusBarHeight: 0,
			hidePwd: true,
			phone: '13501234567',
			pwd: '123456'
		};
	},
	methods: {
		async doLogin() {
			if (!/^1[3-9]\d{9}$/.test(this.phone)) {
				uni.showToast({
					title: '手机号格式不正确', //提示标题
					icon: 'error', //图标
					duration: 3000 //持续时长
				});
				return;
			}
			if (this.pwd.length < 6) {
				uni.showToast({
					title: '密码格式非法',
					icon: 'none',
					duration: 3000
				});
				return;
			}
			let data = await userLogin(this.phone, this.pwd);
			// console.log('获取数据', data);
			if (data.code === 2000) {
				uni.setStorageSync('userToken', data.token);
				uni.switchTab({
					url: '/pages/index/index'
				});
			} else {
				uni.showModal({
					title: '错误',
					content: '登录失败！服务器返回消息：' + data.msg
				});
			}
		},
		clearphone() {
			this.phone = '';
		}
	},
	//生命周期方法，页面加载时触发，一个页面只触发一次
	onLoad() {
		let { statusBarHeight } = uni.getSystemInfoSync(); //获取状态栏的高度
		this.statusBarHeight = statusBarHeight;
	}
};
</script>

<style lang="scss">
.status-bar {
	background-color: $zh-theme-color;
	width: 750rpx;
	position: fixed;
}

.logo {
	width: 450rpx;
	//height: 450rpx;
	margin: $uni-spacing-col-lg * 6 auto 0;
}

.input-group {
	position: relative;
	margin: $uni-spacing-col-lg * 3 $uni-spacing-col-lg * 3 0;
	align-items: center;

	&.pwd-group {
		margin-top: $uni-spacing-col-lg * 2;
	}

	.input {
		font-size: $uni-font-size-base;
		border: 1px solid $uni-border-color;
		border-radius: $uni-border-radius-lg;
		width: 100%;
		height: $uni-font-size-lg * 2.2;
		padding: 0 $uni-spacing-col-base * 4;
	}

	.icon {
		position: absolute;

		&.left {
			left: $uni-spacing-row-sm;
		}

		&.right {
			right: $uni-spacing-row-sm;
			cursor: pointer;
		}
	}
}

.btn {
	margin: $uni-spacing-col-lg * 2.5 $uni-spacing-col-lg * 3 0;
	background: $zh-theme-color;
	color: $uni-text-color-inverse;
	font-size: $uni-font-size-base;

	&:active {
		background-color: darken($zh-theme-color, 5%);
	}
}

.F6 {
	justify-content: space-evenly;
}

.find {
	text-align: center;
	color: $zh-theme-color;
	margin-top: $uni-spacing-col-lg * 2;
}

//针对高度小于500px的屏幕，减小顶部留白
@media screen and (max-height: 500px) {
	.logo {
		margin-top: $uni-spacing-col-lg;
	}
}

//针对高度大于700px的屏幕，增大顶部留白
@media screen and (min-height: 700px) {
	.logo {
		margin-top: $uni-spacing-col-lg * 12;
		margin-bottom: $uni-spacing-col-lg * 4;
	}
}
</style>
